<template>
  <div class="banner">
    <div class="swiper">
      <div class="swiper-wrapper" style="margin-top: 12px">
        <div class="swiper-slide">
          <van-grid :column-num="5" :border="false" icon-size="34">
            <van-grid-item
              v-for="value in inonBigBox1"
              :key="value.name"
              :icon="value.imgUrl"
              :text="value.name"
              :url="value.url"
            />
          </van-grid>
        </div>
        <div class="swiper-slide">
          <van-grid :column-num="5" :border="false" icon-size="34">
            <van-grid-item v-for="value in inonBigBox2" :key="value.name" :icon="value.imgUrl" :text="value.name" />
          </van-grid>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Swiper from 'swiper'
import 'swiper/css'

// 轮播图
const inonBigBox1 = ref([
  {
    name: '京东超市',
    imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png',
    url:'/supermarket'
  },
  {
    name: '京东电器',
    imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/149144/13/37547/3299/64b11027F86659ec1/fade439ac90544b7.png',
    url:'/electricalAppliances'
  },
  {
    name: '服装美妆',
    imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/195186/28/35854/3469/64d4a1e5Fe388886e/3c6f65ecd0aba98b.png'
  },
  {
    name: '充值中心',
    imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/208529/13/35972/4081/6497ee53F4f8d38d9/c5267cb385f923fe.png'
  },
  {
    name: 'PLUS会员',
    imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png'
  },
])
const inonBigBox2 = ref([
{
    name: '京东生鲜',
    imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png'
  },
  {
    name: '京东国际',
    imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png'
  },
  {
    name: '京东拍卖',
    imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/186882/8/12149/5894/60ec1250E9335241a/b22054613aa8ae75.png'
  },
  {
    name: '拍拍二手',
    imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/36551/10/16098/5792/60ec1589E755822d7/f958b896e706008a.png'
  },
  {
    name: '全部',
    imgUrl: 'https://m15.360buyimg.com/mobilecms/jfs/t1/192665/22/12752/7912/60ec15cbE261a32bf/3ace51badf80e71b.png'
  }
])

onMounted(() => {
  var mySwiper = new Swiper('.swiper', {
    // slidesPerView: 5,
    // grid: {
    //   fill: 'column',
    //   rows: 1
    // }
  })
})


</script>

<style scoped>
.banner {
  height: 84px;
  width: 358px;
  background-color: #fff;
  border-radius: 15px;
}
.banner-top {
  width: 100%;
  height: 64px;
}
.banner-footer {
  widows: 100%;
  height: 20px;
}
.swiper {
  width: 100%;
  height: 84px;
}
.van-grid-item {
  height: 64px;
  width: 71px;
}
.swiper {
  --swiper-theme-color: #ff6600;
  --swiper-pagination-color: #00ff33; /* 两种都可以 */
}
</style>
